<template>
	<div :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';

export default {
	props: {
		height:{
			type:String,
			default:'70px'
		},
		width:{
			type:String,
			default:'100%'
		},
		id:{
			type:String,
			default:'ec'
		},
		color:{
            type:Array,
            default:['#33d3ff','#00a2ff']
        }
	},
	data() {
		return {
			chart:{}
		};
	},
	watch:{
		data(){
			this.init()
		}
	},
	methods:{
		init(){
            this.chart = echarts.init(this.$el);

            var data_yue = ['蒸湘区', '珠晖区', '雁峰区', '石鼓区', '南岳区', '衡阳县', '衡南县', '衡山县', '衡东县', '祁东县', '耒阳市', '常宁市', ];
            var data1 = [254258, 267738, 173184, 190056, 58814, 1233972, 1080599, 463116, 775704, 990661, 1372557, 904821];
            var data_l = data_yue.length;

            let option = {
                grid: {
                    left: '0',
                    right: '15',
                    bottom: '30',
                    top: '20',
                    containLabel: true,
                },
                tooltip: {
                    show: true,
                    trigger: 'axis'
                },
                legend: {
                    icon: 'rect',
                    show: false,
                },
                xAxis: [{
                    type: 'category',
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#0282ad'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    data: data_yue
                }],
                yAxis: [{
                    type: 'value',
                    //name: '万元',
                    nameTextStyle: {
                        color: '#fff',
                        fontSize: 14,
                        padding: [0, 40, 8, 0]
                    },
                    minInterval: 500,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#0282ad'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#026296',
                            type: 'solid'
                        }
                    }
                }],
                series: [{
                    name: '数量',
                    type: 'bar',
                    barWidth: 26,
                    itemStyle: {
                        normal: {

                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: this.color[0]
                            }, {
                                offset: 1,
                                color: this.color[1]
                            }]),
                            shadowBlur: 1,
                            shadowColor: '#008cdd',
                            shadowOffsetX: 2,
                            shadowOffsetY: -2
                        }
                    },
                    data: data1
                }, ]
            };

            this.chart.setOption(option);

            var index3 = 0; //播放所在下标

            let this_ = this;
            setInterval(function() {
                this_.chart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: index3
                });
                index3++;
                if (index3 > data_l) {
                    index3 = 0;
                }
            }, 2000);
		}
	},
	mounted() {
        setTimeout(() => {
			this.init()
		}, 20)
	},
};
</script>

<style scoped lang="less">
</style>
